<template>
  <div class="jdys-container">
    <div class="left-panel">
      <div class="drawer-head">
        <span>节点要素</span>
      </div>
      <div class="panel-tree">
        <el-tree
          ref="jdysRefTree"
          :data="treeData"
          node-key="nm"
          :highlight-current="true"
          :props="{children: 'children',label: 'label' }"
          @node-click="handleNodeClick"
          default-expand-all
        >
          <span class="custom-tree-node" slot-scope="{ node, data }">
            {{ data.label }}
          </span>
        </el-tree>
      </div>
    </div>
    <div class="right-panel">
      <!-- 将拖拽区域移到right-panel内 -->
      <div class="drop-container"
        @dragover.prevent
        @drop="handleDrop">
        <!-- 人员区块 -->
        <!-- :handles="['tm', 'tr', 'mr', 'br', 'bm', 'bl', 'ml', 'tl']" -->
        <!-- :draggable="true" -->
        <!-- :resizable="true" -->
        <!-- :grid="[10,10]" -->
        <vue-draggable-resizable
        class="attribute-block"
          v-show="personnelBlock.show"
          :w="1000"
          :h="170"
          :parent="true"
          :debug="false"
          :min-width="200"
          :min-height="170"
          :x="personnelBlock.x"
          :y="personnelBlock.y"
          :draggable="true"
          :resizable="true"
          :isConflictCheck="false"
          :snap="true"
          :snapTolerance="10"
          @refLineParams="getRefLineParams"
          :handles="['tm', 'tr', 'mr', 'br', 'bm', 'bl', 'ml', 'tl']"
          @dragging="onDrag"
          @resizing="onResize">
          <div class="block-title">
            <span>人员类别</span>
          </div>
          <div class="block-content">
            <div v-for="(item, index) in personnelBlock.items"
              :key="'dropped-personnel-'+index"
              class="dropped-item">
              <!-- <i :class="item.icon"></i> -->
              <!-- <div class="" style="width: 70px; height: calc(100% - 50px);"> -->
                <div class="" style="width: 60px; height: 90px;">
                  <el-image style="width:100%; height: 100%" :src="require('@/assets/image/25.png')" fit="fill"></el-image>
                </div>
              <div style="width:100%; height: 40px;line-height: 40px; text-align:center;">{{item.name}}</div>
            </div>
          </div>
        </vue-draggable-resizable>

        <!-- 装备区块 -->
        <template v-for="(item, index) in equipmentBlock.items">
          <vue-draggable-resizable
          :key="'dropped-equipment-'+index"
          v-show="equipmentBlock.show"
          :w="550"
          :h="170"
          :parent="true"
          :draggable="true"
          :resizable="true"
          :min-width="400"
          :min-height="170"
          :x="20"
          :y="20"
          :isConflictCheck="false"
          :snap="true"
          :snapTolerance="10"
          @refLineParams="getRefLineParams"
          :handles="['tm', 'tr', 'mr', 'br', 'bm', 'bl', 'ml', 'tl']"
          class="attribute-block"
          @dragging="onDrag"
          @resizing="onResize">
          <div class="block-title">
            <span>{{item.name}}</span>
            <i class="el-icon-delete" style="margin-left: 10px;cursor: pointer;"></i>
          </div>
          <div class="block-content">
            <div
              class="dropped-item">
              <!-- <i :class="item.icon"></i>
              <span>{{item.name}}</span> -->

              <div class="" style="width: 130px; height: 100px;">
                  <el-image style="width:100%; height: 100%" :src="require('@/assets/image/步战车.png')" fit="fill"></el-image>
                </div>
              <div style="width:100%; height: 40px;line-height: 40px; text-align:center;">{{item.name}}</div>
            </div>
            <div
            v-for="(peo, pInd) in item.peoples"
              class="dropped-people">
              <div class="" style="width: 60px; height: 90px;">
                  <el-image style="width:100%; height: 100%" :src="require('@/assets/image/25.png')" fit="fill"></el-image>
                </div>
              <div style="width:100%; height: 40px;line-height: 40px; text-align:center;">{{peo.name || `席位${pInd+1}`}}</div>
              <!-- <i :class="peo.icon"></i> -->
              <!-- <span>{{peo.name}}</span> -->
            </div>
          </div>
        </vue-draggable-resizable>
        </template>
        <!-- 设施区块 -->
        <vue-draggable-resizable
          v-if="facilityBlock.show"
          :w="300"
          :h="200"
          :parent="true"
          :draggable="true"
          :resizable="true"
          :min-width="200"
          :min-height="150"
          :x="0"
          :y="0"
          :isConflictCheck="false"
          :snap="true"
          :snapTolerance="10"
          @refLineParams="getRefLineParams"
          :handles="['tm', 'tr', 'mr', 'br', 'bm', 'bl', 'ml', 'tl']"
          class="attribute-block"
          @dragging="onDrag"
          @resizing="onResize">
          <div class="block-title">
            <i class="el-icon-office-building"></i>
            <span>设施</span>
          </div>
          <div class="block-content">
            <div v-for="(item, index) in facilityBlock.items"
              :key="'dropped-facility-'+index"
              class="dropped-item">
              <i :class="item.icon"></i>
              <span>{{item.name}}</span>
            </div>
          </div>
        </vue-draggable-resizable>
        <!--辅助线-->
      <span class="ref-line v-line"
            v-for="item in vLine"
            v-show="item.display"
            :style="{ left: item.position, top: item.origin, height: item.lineLength}"
      />
      <span class="ref-line h-line"
            v-for="item in hLine"
            v-show="item.display"
            :style="{ top: item.position, left: item.origin, width: item.lineLength}"
       />
      <!--辅助线END-->
      </div>
    </div>
    <div class="attribute-right">
      <div class="drawer-content">
        <div class="drawer-head" style="margin: 0px 10px;">
          <span>作战实力</span>
        </div>
        <!-- 上半部分树 -->
        <div class="drawer-tree">
          <el-tree
            :data="zzslTreeData"
            :props="{children: 'children',label: 'label' }"
            @node-click="handleDrawerNodeClick"
            style="font-size: 15px;color: #333333;"
          >
          </el-tree>
        </div>
        <div class="drawer-head" style="margin: 0px 10px;">
          <span>实力模块</span>
        </div>
        <!-- 下半部分属性面板 -->
        <div class="drawer-attributes">
          <!-- 人员属性 -->
          <div class="attribute-section">
            <div class="section-title">人员</div>
            <div class="attribute-items" style="grid-template-columns: repeat(auto-fill, minmax(50px, 1fr));">
              <div v-for="(item, index) in personnelList"
                :key="'personnel-'+index"
                class="attribute-item"
                draggable="true"
                @dragstart="handleDragStart($event, 'personnel', item)">
                <div style="width: 60px;height: 80px; padding: 5px 8px;">
                  <el-image :src="require('@/assets/image/25.png')" style="width: 100%; height: 100%"></el-image>
                </div>
                <div class="attribute-name">{{ item.name }}</div>
              </div>
            </div>
          </div>
          <!-- 装备属性 -->
          <div class="attribute-section">
            <div class="section-title">装备</div>
            <div class="attribute-items" style="grid-template-columns: repeat(auto-fill, minmax(70px, 1fr));">
              <div v-for="(item, index) in equipmentList"
                :key="'equipment-'+index"
                class="attribute-item"
                draggable="true"
                :title="item.name"
                @dragstart="handleDragStart($event, 'equipment', item)" style="flex-direction: column;"
              >
                <div style="width: 75px; height: 55px;">
                  <el-image :src="require('@/assets/image/步战车.png')" style="width: 100%; height: 100%"></el-image>
                </div>
                <div class="attribute-name" :title="item.name" >{{ item.name }}</div>
              </div>
            </div>
          </div>
          <!-- 设施属性 -->
          <div class="attribute-section">
            <div class="section-title">设施</div>
            <div class="attribute-items">
              <div style="margin-left: 10px">暂无数据</div>
<!--              <div v-for="(item, index) in facilityList"-->
<!--                :key="'facility-'+index"-->
<!--                class="attribute-item"-->
<!--                draggable="true"-->
<!--                @dragstart="handleDragStart($event, 'facility', item)">-->
<!--                <i :class="item.icon"></i>-->
<!--                <span>{{item.name}}</span>-->
<!--              </div>-->
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>

export default {
  name: 'jdys',
  data() {
    return {
      drawerVisible: false,  // 抽屉显示状态
      // 人员列表
      personnelList: [
        { name: '人员1', icon: 'el-icon-user' },
        { name: '人员2', icon: 'el-icon-user-solid' }
      ],
      // 装备列表
      equipmentList: [
        { name: 'ZBD05式两栖装甲步战车', icon: 'el-icon-s-tools',
        peoples:[
          {id:'1', name: '', icon: 'el-icon-user', sfz:''},
          {id:'2', name: '', icon: 'el-icon-user', sfz:''},
          {id:'3', name: '', icon: 'el-icon-user', sfz:''},
          {id:'4', name: '', icon: 'el-icon-user', sfz:''}
        ]
      },
      { name: '05式通信指挥车', icon: 'el-icon-s-tools',
        peoples:[
          {id:'1', name: '', icon: 'el-icon-user', sfz:''},
          {id:'2', name: '', icon: 'el-icon-user', sfz:''},
        ]
      },
      ],
      // 设施列表
      facilityList: [
        { name: '设施1', icon: 'el-icon-office-building' },
        { name: '设施2', icon: 'el-icon-school' }
      ],
      // 拖拽后的数据块
      personnelBlock: {
        show: false,
        x:20,
        y:20,
        w:0,
        h:0,
        items: []
      },
      equipmentBlock: {
        show: false,
        items: []
      },
      facilityBlock: {
        show: false,
        items: []
      },
      vLine: [],
      hLine: [],
      treeData: [{label: '城市作战群',}, { label: '陆军机步队',}],
      zzslTreeData: [{
        id: '01',
        label: '营',
        children: [{
          id: '0101',
          label: '连',
          children: [
            { id: '010101', label: '排' },
            { id: '010102', label: '排' },
            { id: '010103', label: '排' }
          ]
        }]
      }, {
        id: '02',
        label: '营',
        children: [{
          id: '0201',
          label: '连',
          children: [
            { id: '020101', label: '排' },
            { id: '020102', label: '排' },
            { id: '020103', label: '排' }
          ]
        }]
      }],
    }
  },
  methods: {
    handleNodeClick(data) {
      console.log(data)
    },
    // 抽屉树节点点击事件
    handleDrawerNodeClick(data) {
      console.log('抽屉树节点点击:', data)
    },
    // 拖拽开始事件
    handleDragStart(event, type, item) {
      event.dataTransfer.setData('type', type)
      event.dataTransfer.setData('item', JSON.stringify(item))
    },
    // 拖拽放置事件
    handleDrop(event) {
      const type = event.dataTransfer.getData('type')
      const item = JSON.parse(event.dataTransfer.getData('item'))

      switch(type) {
        case 'personnel':
          this.personnelBlock.show = true
          this.personnelBlock.items.push(item)
          break
        case 'equipment':
          this.equipmentBlock.show = true
          this.equipmentBlock.items.push(item)
          break
        case 'facility':
          this.facilityBlock.show = true
          this.facilityBlock.items.push(item)
          break
      }

      console.log(this.personnelBlock,this.equipmentBlock,this.facilityBlock);
    },
    // 辅助线回调事件
    getRefLineParams (params) {
      const { vLine, hLine } = params
      console.log(params);
      this.vLine = vLine
      this.hLine = hLine
    },
    // 添加打开抽屉的方法
    openDrawer() {
      this.drawerVisible = true
    },
    // 修改拖拽和缩放的处理方法
    onDrag(x, y) {
      console.log('拖拽位置:', x, y)
      // 可以在这里保存位置信息
    },
    onResize(x, y, width, height) {
      console.log('调整大小:', width, height)
      // 可以在这里保存尺寸信息
      this.$nextTick(() => {
        // 触发内容区域重新布局
        window.dispatchEvent(new Event('resize'))
      })
    }
  }
}
</script>

<style lang="scss" scoped>
::v-deep.vxe-modal--wrapper{
  width: 0 !important;
  height: 0 !important;
}
::v-deep.vxe-modal--wrapper.is--mask:before,
::v-deep.vxe-modal--wrapper.lock--view:before{
  content: none;
}
.jdys-container {
  display: flex;
  height: 100%;
  padding: 10px;

  .left-panel {
    width: 300px;
    padding: 0px 8px 10px;
    height: 100%;
    background: #fff;
    background: url("../../assets/image/left-box.png") no-repeat;
    background-size: 100% 100%;
    margin-right: 10px;
  }
  .panel-tree{
    height: calc(100% - 30px);
    margin-top: 10px;
    .custom-tree-node{
      width: 100%;
      height: 30px;
      display: flex;
      align-items: center;
      justify-content: space-between;
      font-size: 16px;
      color: #333;
      span{
        margin-left: 5px;
      }
    }
    ::v-deep .el-tree-node__content{
      height: 30px;
    }
  }

  .right-panel {
    flex: 1;
    width: calc(100% - 620px);
    position: relative;
    background: #fff;
    border-radius: 4px;
    padding: 15px;
    box-shadow: 0 2px 12px 0 rgba(0,0,0,.1);

    // 添加悬浮按钮样式
    .floating-btn {
      position: fixed;
      right: 20px;
      top: 50%;
      transform: translateY(-50%);
      z-index: 999;
      padding: 10px 15px;
      border-radius: 4px 0 0 4px;
      box-shadow: -2px 0 8px rgba(0,0,0,0.1);
      writing-mode: vertical-lr;
      letter-spacing: 2px;
    }

    .drop-container {
      position: relative;
      height: 100%; // 修改高度为100%，因为按钮不再占用空间
      // background: #fafafa;
      border: 2px dashed #e4e7ed;
      border-radius: 6px;
      // padding: 20px;
      transition: all 0.3s;
      overflow: hidden;
      // background:
      // linear-gradient(-90deg, rgba(0, 0, 0, 0.1) 1px, transparent 1px) 0% 0% / 10px 10px,
      // linear-gradient(rgba(0, 0, 0, 0.1) 1px, transparent 1px) 0% 0% / 10px 10px;

      &:hover {
        border-color: #409eff;
      }

      .attribute-block {
        // position: relative;
        border-radius: 6px;
        box-shadow: 0 2px 12px 0 rgba(0,0,0,0.05);
        // overflow: hidden;
        // position: absolute;

        // 修改 vue-draggable-resizable 默认样式
        :deep(.vdr) {
          border: 1px solid #ebeef5;
          border-radius: 6px;

          &.active {
            border-color: #409eff;
          }
        }

        :deep(.vdr-handle) {
          background-color: #409eff;
          border: 1px solid #fff;
          width: 8px;
          height: 8px;
          border-radius: 4px;

          &:hover {
            transform: scale(1.2);
          }
        }

        .block-title {
          display: flex;
          align-items: center;
          padding: 2px 5px;
          background: #f5f7fa;
          // border-bottom: 1px solid #ebeef5;
          cursor: move;
          position: absolute;
          top: -13px;
          left: 15px;
          border-radius: 2px;
          // position: sticky;
          // top: 0;
          // z-index: 1;

          i {
            font-size: 18px;
            margin-right: 8px;
            color: #409eff;
          }

          span {
            font-weight: bold;
            color: #303133;
          }
        }

        .block-content {
          padding: 10px 15px 10px;
          height: calc(100% - 5px);
          overflow-y: auto;
          margin-top: 5px;
          // display: grid;
          grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
          gap: 12px;
          background: #fff;
          display: flex;

          .dropped-people,
          .dropped-item {
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: space-between;
            padding: 5px;
            background: #f5f7fa;
            border-radius: 4px;
            transition: all 0.3s;
            //height: 240px;

            &:hover {
              background: #ecf5ff;
              transform: translateY(-2px);
            }

            i {
              font-size: 18px;
              margin-right: 8px;
              color: #409eff;
            }

            span {
              color: #606266;
            }
          }
          .dropped-people{
            // width: 60px;
          }
        }
      }
    }
  }
}

.drawer-attributes {
  .attribute-section {
    margin-bottom: 0px;

    .section-title {
      font-size: 15px;
      font-weight: bold;
      padding: 5px;
      margin-bottom: 0px;
    }

    .attribute-items {
      display: grid;
      grid-template-columns: repeat(auto-fill, minmax(70px, 1fr));
      gap: 10px;
      padding: 5px;

      .attribute-item {
        margin: 0 auto;
        background: #eef2f8;
        border: 1px solid #c9d5e1;
        border-radius: 2px;
        cursor: move;
        transition: all 0.3s;

        &:hover {
          background: #f5f7fa;
          border-color: #409eff;
          box-shadow: 0 2px 6px rgba(0,0,0,0.1);
        }
        .attribute-name{
          color: #16314b;
          font-size: 14px;
          text-align: center;
          padding: 2px 0px;
          background-color: #d7dee3;
          display: -webkit-box;
          -webkit-box-orient: vertical;
          -webkit-line-clamp: 2;
          overflow: hidden;
          text-overflow: ellipsis;
        }
      }
    }
  }
}
.drawer-head{
  height: 35px;
  background: url("../../assets/image/min-title.png") no-repeat;
  background-size: 100% 24px;
  color: #0c4988;
  background-position-y: 12px;
  display: flex;
  align-items: center;
  padding: 0 5px;
  font-size: 16px;
  font-weight: bold;
  //margin: 5px 10px 0px;
}
.attribute-right{
  background: url("../../assets/image/r-box.png") no-repeat;
  background-size: 100% 100%;
  margin-left: 10px;
}
// 添加弹框相关样式
.attribute-right,
.attribute-modal {
  :deep(.vxe-modal--box) {
    border-radius: 4px;
    overflow: hidden;
  }

  :deep(.vxe-modal--header) {
    background-color: #f5f7fa;
    padding: 12px 15px;
  }

  :deep(.vxe-modal--body) {
    padding: 0;
  }

  .drawer-content {
    height: 100%;
    display: flex;
    flex-direction: column;

    .drawer-tree {
      padding: 5px 10px;
      flex: 0 0 auto;
      max-height: 300px;
      overflow-y: auto;
    }

    .drawer-attributes {
      flex: 1;
      height: calc(100% - 35px);
      width: 350px;
      overflow-y: auto;
      padding: 5px;
    }
  }
}

// 确保弹框内容可以正常滚动
.drawer-attributes {
  .attribute-section {
    &:last-child {
      margin-bottom: 0;
    }
  }
}
</style>
